<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=request.getContextPath()%>/" />
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
    <style>
        .thead-blue {
            color: #fff;
            font-weight: bold;
            background-color: #337ab7;
        }
        .card-container {
            display: flex;
            flex-wrap: wrap;
        }
        .contact-card {
            margin: 10px;
            width: calc(33.333% - 20px);
        }
        @media (max-width: 992px) {
            .contact-card {
                width: calc(50% - 20px);
            }
        }
        @media (max-width: 768px) {
            .contact-card {
                width: 100%;
            }
        }
    </style>
    <script src="static/jquery/jquery-1.10.2.min.js"></script>
    <script src="static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 操作消息提示 -->
<c:if test="${not empty msg}">
    <div class="alert alert-info alert-dismissible fade in" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
            ${msg}
    </div>
</c:if>

<!-- 搜索表单 -->
<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">我的名片</h4>
    </div>
    <div class="panel-body">
        <form action="mp/contact/listMyMpContact" id="seachform" method="post" class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-md-6">
                    <label for="name" class="col-md-3 control-label">姓名</label>
                    <div class="col-md-9">
                        <input type="text" id="name" name="name" class="form-control"
                               placeholder="请输入姓名" value="${name}">
                        <input type="hidden" name="page" id="page" value="${pageInfo.current}">
                        <input type="hidden" name="pageSize" id="pageSize" value="${pageInfo.size}">
                    </div>
                </div>
                <div class="col-md-6">
                    <label for="sex" class="col-md-3 control-label">性别</label>
                    <div class="col-md-9">
                        <select name="sex" class="form-control" id="sex">
                            <option value="">--请选择--</option>
                            <option value="M" ${sex == 'M' ? 'selected' : ''}>男</option>
                            <option value="F" ${sex == 'F' ? 'selected' : ''}>女</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-6">
                    <label for="company" class="col-md-3 control-label">公司</label>
                    <div class="col-md-9">
                        <input type="text" id="company" name="company"
                               placeholder="请输入公司名" class="form-control"
                               value="${company}">
                    </div>
                </div>
                <div class="col-md-6">
                    <label for="typeid" class="col-md-3 control-label">名片类型</label>
                    <div class="col-md-9">
                        <select name="typeid" class="form-control" id="typeid">
                            <option value="">--请选择--</option>
                            <c:forEach items="${cardtypes}" var="type">
                                <option value="${type.oid}" ${typeid == type.oid ? 'selected' : ''}>${type.type}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-6">
                    <label for="mobile" class="col-md-3 control-label">电话</label>
                    <div class="col-md-9">
                        <input type="text" id="mobile" name="mobile" placeholder="请输入电话"
                               class="form-control" value="${mobile}">
                    </div>
                </div>

                <div class="col-md-6">
                    <label class="col-md-3 control-label"></label>
                    <div class="col-md-9">
                        <button type="button" onclick="searchBtn()"
                                class="btn btn-success">搜索名片</button>
                        <a type="button" href="mp/contact/toAddMpContact" class="btn btn-info">添加名片</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 名片列表 -->
<div class="card-container">
    <c:forEach items="${pageInfo.records}" var="contact" varStatus="status">
        <div class="contact-card">
            <div class="panel panel-primary">
                <table class="table table-bordered table-hover">
                    <thead>
                    <tr class="thead-blue" align="center">
                        <td colspan="2">${contact.name}</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="col-sm-4">名片类型</td>
                        <td>
                            <c:forEach items="${cardtypes}" var="type">
                                <c:if test="${contact.typeid == type.oid}">${type.type}</c:if>
                            </c:forEach>
                        </td>
                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>${contact.sex == 'M' ? '男' : '女'}</td>
                    </tr>
                    <tr>
                        <td>公司</td>
                        <td>${contact.company}</td>
                    </tr>
                    <tr>
                        <td>电话</td>
                        <td>${contact.mobile}</td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <a href="mp/contact/mpContactInfo?oid=${contact.oid}" class="btn btn-info btn-xs">详情</a>
                            <a href="mp/contact/toUpdateMpContact?oid=${contact.oid}" class="btn btn-primary btn-xs">修改</a>
                            <button type="button" onclick="deleteMpContact(${contact.oid})"
                                    class="btn btn-danger btn-xs" data-toggle="modal" data-target="#confirmModal">删除
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </c:forEach>

    <!-- 无数据时显示 -->
    <c:if test="${pageInfo.total == 0}">
        <div class="col-sm-12 text-center">
            <p class="alert alert-warning">暂无名片数据</p>
        </div>
    </c:if>
</div>

<!-- 分页控件 -->
<c:if test="${pageInfo.total > 0}">
    <div class="input-group col-md-12 text-center">
        <div class="btn-group">
            <button onclick="gotoPage(1, ${pageInfo.size})" class="btn btn-primary"
                ${pageInfo.current == 1 ? 'disabled' : ''}>首页</button>

            <button onclick="gotoPage(${pageInfo.current - 1}, ${pageInfo.size})" class="btn btn-primary"
                ${pageInfo.current == 1 ? 'disabled' : ''}>上一页</button>

            <button class="btn btn-primary disabled">当前第${pageInfo.current}/${pageInfo.pages}页</button>

            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    每页显示${pageInfo.size}条 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="javascript:gotoPage(1,6)">每页显示6条</a></li>
                    <li><a href="javascript:gotoPage(1,12)">每页显示12条</a></li>
                    <li><a href="javascript:gotoPage(1,18)">每页显示18条</a></li>
                    <li><a href="javascript:gotoPage(1,24)">每页显示24条</a></li>
                </ul>
            </div>

            <button class="btn btn-primary"
                    onclick="gotoPage(${pageInfo.current + 1}, ${pageInfo.size})"
                ${pageInfo.current == pageInfo.pages ? 'disabled' : ''}>下一页</button>

            <button onclick="gotoPage(${pageInfo.pages}, ${pageInfo.size})" class="btn btn-primary"
                ${pageInfo.current == pageInfo.pages ? 'disabled' : ''}>尾页</button>
        </div>
    </div>
</c:if>

<br><br><br>

<!-- 删除确认模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="confirmModalLabel">提示</h4>
            </div>
            <div class="modal-body">确认删除吗？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="subconfirm" class="btn btn-primary">提交更改</button>
            </div>
        </div>
    </div>
</div>

<!-- 提示消息模态框 -->
<div class="modal fade" id="alertMsgModal" tabindex="-1" role="dialog" aria-labelledby="alertMsgModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="alertMsgModalLabel">提示</h4>
            </div>
            <div class="modal-body" id="alertmsg"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<script>
    $(document).ready(function(){
        $("#subconfirm").click(function(){
            deleteConfirm();
            $('#confirmModal').modal('hide');
        });
    });

    var deleteoid;
    function deleteMpContact(oid){
        deleteoid = oid; // 存储要删除的ID
    }

    function deleteConfirm(){
        // 增加参数检查
        if(!deleteoid){
            $("#alertmsg").text("未获取到名片ID，请重试！");
            $('#alertMsgModal').modal('show');
            return;
        }

        $.ajax({
            url: "mp/contact/deleteMpContact",
            type: "POST",
            data: {"oid": deleteoid},
            success: function(success){
                if(success){
                    $("#alertmsg").text("删除成功！");
                    $('#alertMsgModal').modal('show');
                    setTimeout(function(){
                        location.reload();
                    }, 1500);
                }else{
                    $("#alertmsg").text("删除失败，可能该名片已被使用！");
                    $('#alertMsgModal').modal('show');
                }
            },
            error: function(xhr){
                console.log("删除请求错误：", xhr); // 控制台输出错误信息
                $("#alertmsg").text("服务器请求失败，状态码：" + xhr.status);
                $('#alertMsgModal').modal('show');
            }
        });
    }

    function gotoPage(page, pageSize){
        $("#page").val(page);
        $("#pageSize").val(pageSize);
        $("#seachform").submit();
    }
    function searchBtn(){
        $("#page").val(1); // 搜索时重置为第1页
        $("#seachform").submit();
    }

    // 全局AJAX错误处理
    $(document).ajaxError(function(event, xhr) {
        if(xhr.status == "403"){
            document.location.href = xhr.getResponseHeader("url");
        }else if(xhr.status != "200"){
            $("#alertmsg").text("服务器错误，请重试！");
            $('#alertMsgModal').modal('show');
        }
    });
</script>